<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="/static/js/spin.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.css" type="text/css" media="all"/>
    <style type="text/css">
        #message-server {
            min-width: 400px;
        }

        #spinner {
            background-color: grey;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body onunload="">
<div class="container-fluid">
    <div class="sidebar">
        <img width="70%" src="/static/images/tracey-icon.jpeg" alt="Tracey Icon"/>
    </div>

    <div class="content">
        <br/>
        <form class="form-stacked">
            <label for="message-server">Choose Message Server</label>
            <select id="message-server">
                $messageServers.keys:{ key |
                <option value="$messageServers.(key)$">$key$ ($messageServers.(key)$)</option>
                }$
            </select>
        </form>
        <div id="search-form">
            <!-- proxied forms go here -->
        </div>
    </div>

    <div id="spinner"></div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#message-server").change(function (e) {
            updateSearchForm();
        });
        updateSearchForm(jQuery.cookie('selectedMessageServerUrl'));
    });

    function forceBootstrapStyling() {
        var forms = jQuery("#search-form form");
        forms.bind("submit", function(e) {
            showSpinner();
        });
        forms.attr('class', '');
        forms.attr('class', 'form-stacked');
        var buttons = jQuery("#search-form button");
        buttons.attr('class', '');
        buttons.attr('class', 'btn primary');
        var inputs = jQuery("#search-form input");
        inputs.attr('class', '');
        inputs.attr('class', 'large');
    }

    function updateSearchForm(messageServerUrl) {
        if (messageServerUrl) {
            jQuery("#message-server").val(messageServerUrl);
        } else {
            messageServerUrl = jQuery("#message-server").val();
        }
        showSpinner();
        jQuery.ajax({
            url:'searchForm?messageServer=' + messageServerUrl,
            success:function (data, textStatus, jqXHR) {
                jQuery("#search-form").empty();
                jQuery("#search-form").append(jQuery(jqXHR.responseText));
                forceBootstrapStyling();
                jQuery.cookie('selectedMessageServerUrl', messageServerUrl);
                hideSpinner();
            },
            error:function (jqXHR, textStatus, errorThrown) {
                alert("Error contacting" + messageServerUrl + ": " + errorThrown);
                jQuery("#search-form").empty();
                hideSpinner();
            }
        });
    }

    var opts = {
        lines:13, // The number of lines to draw
        length:6, // The length of each line
        width:2, // The line thickness
        radius:10, // The radius of the inner circle
        corners:1, // Corner roundness (0..1)
        rotate:0, // The rotation offset
        color:'#000', // #rgb or #rrggbb
        speed:2.1, // Rounds per second
        trail:13, // Afterglow percentage
        shadow:false, // Whether to render a shadow
        hwaccel:false, // Whether to use hardware acceleration
        className:'spinner', // The CSS class to assign to the spinner
        zIndex:2e9, // The z-index (defaults to 2000000000)
        top:'auto', // Top position relative to parent in px
        left:'auto' // Left position relative to parent in px
    };
    var spinner = new Spinner(opts);
    function showSpinner() {
        var spinnerDiv = document.getElementById('spinner');
        spinnerDiv.style.display = "block";
        spinner.spin(spinnerDiv);
    }
    function hideSpinner() {
        var spinnerDiv = document.getElementById('spinner');
        spinnerDiv.style.display = "none";
        spinner.stop();
    }
</script>
</body>
</html>